<template>
  <el-dialog
    :visible="opetatorDialog"
    :show-close="true"
    :close="handleClose"
    :before-close="handleClose"
    class="small-common-dialog-size operator-dialog"
  >
    <div class="title-container">
      <Title :title="title" font-size="16px"/>
      <span class="title-tip">{{ titleExplain }}</span>
    </div>
    <div class="descript">
      <el-input v-model="description" :maxlength="500" type="textarea" resize="none"/>
    </div>
    <div class="center">
      <el-button :disabled="loading" type="primary" size="small" class="ok submit-btn" @click="descriptionEdit">确定<i v-if="loading" class="el-icon-loading"/></el-button>
      <el-button class="back-btn cancel-btn-style" type="info" size="small" @click="handleClose" >取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';

export default {
  components: { Title },
  props: {
    id: {
      type: Number | String,
      default: ''
    },
    editApi: {
      type: Function,
      default: null
    },
    title: {
      type: String,
      default: '编辑还款说明'
    },
    titleExplain: {
      type: String,
      default: '编辑说明不会产生操作日志'
    }
  },
  data() {
    return {
      description: '',
      opetatorDialog: false,
      loading: false
    };
  },
  methods: {
    openDialog(description = '') {
      this.description = description;
      this.opetatorDialog = true;
    },
    handleClose() {
      this.description = '';
      this.opetatorDialog = false;
    },
    descriptionEdit() {
      this.loading = true;
      const data = {
        id: this.id,
        description: this.description
      };
      this.editApi(data).then(res => {
        this.loading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.handleClose();
        this.$emit('updateInfo');
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.operator-dialog{
  .descript{
    margin-bottom: 24px;
    ::v-deep {
      .el-textarea .el-textarea__inner{
        height: 200px;
      }
    }
  }
  &::v-deep {
    .el-dialog__body{
      padding: 16px 24px 24px !important;
    }
  }
  .center{
    display: flex;
    justify-content: center;
  }
  .title-container{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
    .title-head{
      flex: none;
    }
    .title-tip{
      margin-left: 9px;
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
